<template>
  <div class="tab-bar">
    <div class="tabs-container">
      <ATabs
        v-model:activeKey="activeTab"
        type="editable-card"
        hide-add
        :animated="false"
        @change="handleTabChange"
        @edit="handleTabEdit"
      >
        <ATabPane v-for="tab in tabList" :key="tab.path" :closable="tab.closable">
          <template #tab>
            <component :is="Icons[tab.icon]" v-if="tab.icon && Icons[tab.icon]" style="margin-right: 4px" />
            {{ tab.title }}
          </template>
        </ATabPane>
      </ATabs>
    </div>

    <div class="tab-actions">
      <ADropdown :trigger="['click']">
        <UnorderedListOutlined class="action-icon" />
        <template #overlay>
          <AMenu>
            <AMenuItem key="close-other" @click="handleCloseOther">
              <CloseOutlined />
              <span>关闭其他</span>
            </AMenuItem>
            <AMenuItem key="close-all" @click="handleCloseAll">
              <CloseCircleOutlined />
              <span>关闭所有</span>
            </AMenuItem>
          </AMenu>
        </template>
      </ADropdown>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useTabsStore, useAppStore } from '@/store'
import { storeToRefs } from 'pinia'
import * as Icons from '@ant-design/icons-vue'
import { UnorderedListOutlined, CloseOutlined, CloseCircleOutlined } from '@ant-design/icons-vue'

const router = useRouter()
const tabsStore = useTabsStore()
const appStore = useAppStore()
const { tabList, activeTab } = storeToRefs(tabsStore)
const { collapsed } = storeToRefs(appStore)

// 计算侧边栏宽度（与BasicLayout保持一致）
const siderWidth = computed(() => {
  if (collapsed.value) {
    return 80
  }
  return appStore.showSubMenu ? 240 : 80
})

// 切换标签页
const handleTabChange = (path) => {
  router.push(path)
}

// 编辑标签页（关闭）
const handleTabEdit = (path, action) => {
  if (action === 'remove') {
    tabsStore.removeTab(path)
  }
}

// 关闭其他标签页
const handleCloseOther = () => {
  tabsStore.closeOtherTabs(activeTab.value)
}

// 关闭所有标签页
const handleCloseAll = () => {
  tabsStore.closeAllTabs()
}
</script>

<style lang="scss" scoped>
.tab-bar {
  position: fixed;
  top: 64px;
  right: 0;
  left: v-bind('siderWidth + "px"');
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: var(--bg-color);
  box-shadow: 0 1px 4px var(--shadow-color);
  z-index: 98;
  transition: left 0.3s;

  .tabs-container {
    flex: 1;
    overflow: hidden;

    :deep(.ant-tabs) {
      .ant-tabs-nav {
        margin: 0;

        &::before {
          border: none;
        }
      }

      .ant-tabs-tab {
        padding: 4px 12px;
        background: var(--tab-bg);
        border: 1px solid var(--border-color);
        border-radius: 2px;
        margin-right: 4px;
        transition: all 0.3s;
        color: var(--text-color);

        &:hover {
          color: #1890ff;
        }

        &.ant-tabs-tab-active {
          background: #1890ff;
          border-color: #1890ff;

          .ant-tabs-tab-btn {
            color: #fff;
          }

          .ant-tabs-tab-remove {
            color: #fff;

            &:hover {
              color: #fff;
            }
          }
        }
      }
    }
  }

  .tab-actions {
    margin-left: 8px;

    .action-icon {
      padding: 4px 8px;
      cursor: pointer;
      transition: all 0.3s;
      color: var(--text-color);

      &:hover {
        color: #1890ff;
        background: var(--hover-bg);
        border-radius: 2px;
      }
    }
  }
}

// 手机端适配
@media screen and (max-width: 768px) {
  .tab-bar {
    left: 0 !important;
  }
}
</style>
